<template>
    <div >
      <flexbox class="product_btn" >
        <flexbox-item>
          <x-button  @click.native="contentShare()" >内容分享</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button @click.native="imgtextShare()" >二维码分享</x-button>
        </flexbox-item>
      </flexbox>
      <div class="circle"></div>
      <div v-transfer-dom>
        <x-dialog v-model="showHideOnBlur" class="dialog-demo creditLoan_qrcode" hide-on-blur>
          <div class="img-box">
            <p class="qcode_p">微信扫描二维码或长按保存</p>
            <qrcode v-show="!qrcodeShow" :value="codeurl" type="img" class="img_qr"></qrcode>
            <div v-show="qrcodeShow">
              <img :src="dataUrl">
              <canvas ref="canvas" v-show="false"></canvas>
            </div>
          </div>
          <div @click="showHideOnBlur=false">
            <span class="vux-close"></span>
          </div>
        </x-dialog>
      </div>
  </div>
</template>
<script>
import { XButton, Flexbox, FlexboxItem, TransferDomDirective as TransferDom, XDialog, Qrcode } from 'vux'
import PartnerCredit from '../comment/PartnerCredit'
import utils from '../utils'
import qr from 'qr.js'
export default {
  props: ['item', 'index', 'listShow'],
  directives: {
    TransferDom
  },
  data(){
    return{
      qrcodeShow: true,
      showHideOnBlur: false, // 弹窗
      friends: false,
      codeurl: '',
      dataUrl: '',
      logo: '',
      size: 128,
      bgColor: '#fff',
      fgColor: '#000'
    }
  },
  components:{
    XButton,
    Flexbox,
    FlexboxItem,
    PartnerCredit,
    XDialog,
    Qrcode
  },
  methods:{
    createQr () {
      const qrcode = qr(this.codeurl)
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const size = this.size / qrcode.moduleCount
      const scale = window.devicePixelRatio / this.getPixelRatio(ctx)
      canvas.height = canvas.width = this.size * scale
      ctx.scale(scale, scale)
      qrcode.modules.forEach((row, rdx) => {
        row.forEach((cell, cdx) => {
          ctx.fillStyle = cell ? this.fgColor : this.bgColor
          var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
          ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
        })
      })
      var image = document.createElement('img')
      image.src = this.logo
      image.onload = () => {
        var dwidth = this.size * 0.2
        var dx = (this.size - dwidth) / 2
        var dheight = image.height / image.width * dwidth
        var dy = (this.size - dheight) / 2
        image.width = dwidth
        image.height = dheight
        ctx.drawImage(image, dx, dy, dwidth, dheight)
        this.dataUrl = canvas.toDataURL()
      }
    },
    getPixelRatio (ctx) {
      return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    },
    contentShare () {
      this.$emit('contentFloat')
      this.sharecontent()
    },
    imgtextShare (index) {
      this.logo = ''
      this.codeurl = ''
      this.codeurl = this.$store.state.Url + '/creditLogin/index?shareParam=share&userId=' + this.$store.state.userID + '&partnerId=' + this.item.partnerId + '&channel=6'
      if (this.item.qrCodeLogoIsShow === false) {
        this.qrcodeShow = false
      } else {
        this.qrcodeShow = true
         if (this.item.partnerId) {
          // this.logo = this.item.logoUrl
          this.logo = this.$store.state.logoUrl + this.item.partnerId + '.png'
        } else {
          this.logo = '../../static/img/uxd_logo.png'
        }
        setTimeout(() => {
          this.createQr()
        },10)
      }
      this.showHideOnBlur = true
    },
    sharecontent (index) {
      var shareUrl, shareParams
      if (this.item.partnerId) {
        shareUrl = this.$store.state.Url + '/creditLogin/index'
        shareParams = '?shareParam=share&userId=' + this.$store.state.userID + '&partnerId=' + this.item.partnerId
      } else {
        shareUrl = this.$store.state.Url + '/creditLogin/index'
        shareParams = '?shareParam=share&userId=' + this.$store.state.userID
      }
      this.$store.commit('changeIndexConf', {
        shareTitle: this.item.shareTitle,
        shareDesc: this.item.shareDesc,
        shareImg: this.item.shareImageUrl,
        shareLink: shareUrl + shareParams
      })
      utils.refreshShare(this.$wechat, this.$store)
    }
  }
}
</script>


